<template>
    <div class="app-container">
        <!--编写ElementUI组件-->

      <el-row>
        <el-col :span="24">
          物品名称：
          <el-input
            placeholder="请输入内容" v-model="goodsName" clearable style="width: 200px">
          </el-input>
          物品类别：
          <el-select v-model="typeId" clearable placeholder="请选择" style="margin-left:10px;margin-right: 40px">
            <el-option v-for="articleType in ArticleType" :key="articleType.typeId" :label="articleType.typeName" :value="articleType.typeId"></el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" @click="conditionSelects">搜索</el-button>
          <el-button type="primary" icon="el-icon-search" @click="returnOne">返回</el-button>
          <br/>
          <br/>
          <el-button type="danger" icon="el-icon-delete"  @click="deleteMany">批量删除</el-button>
          <!--<el-button type="danger" icon="el-icon-delete" @click="deleteMany">批量删除</el-button>-->
          <el-dialog title="批量删除页面" :visible.sync="visible" width="40%" top="5vh">
        <p>确定删除这些选中的吗？</p>
            <div slot="footer" class="dialog-footer">
              <el-button @click="visible = false">取 消</el-button>
              <el-button type="primary" @click="deleteManyChecked">确 定</el-button>
            </div>
          </el-dialog>
          <el-button type="info" icon="el-icon-circle-plus-outline" plain style="margin-left:10px;margin-right: 40px" @click="addNewArticle">新增</el-button>
        </el-col>

      </el-row>
      <br/>
      <!--表格-->
      <el-row>
        <el-col :span="22">
          <el-table
            border
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange" :row-key="getId" >
            <el-table-column type="selection" width="55" align="center" ></el-table-column>
            <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
            <el-table-column label="物品名称" align="center">
              <template slot-scope="scope">
                <strong style="color: dodgerblue">{{scope.row.articleName}}</strong>
              </template>
            </el-table-column>
            <el-table-column label="物品类别" width="100px" align="center">
              <template slot-scope="scope">
                <strong style="color: dodgerblue">{{scope.row.type.typeName}}</strong>
              </template>
            </el-table-column>
            <el-table-column prop="stockNum" label="库存数量" width="80px" align="center"></el-table-column>
            <el-table-column prop="stockUnit" label="单位" width="80px" align="center"></el-table-column>
            <el-table-column label="操作" width="150px" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="handleUpdate(scope.row.articleId)">修改</el-button>
                <el-button size="mini" type="warning" @click="handleDelete(scope.row.articleId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-row>
      <el-col :span="22" align="center">
        <!--current-change是组件自带事件，组件自带事件一般都存在回调参数，定义的事件处理方法可以直接接收参数值-->
        <!--建议接收后通过console.log()输出查看回调参数值-->
        <el-pagination background hide-on-single-page layout="prev, pager, next"
                       :page-size="pageSize" :current-page="currentPage" @current-change="getAllArticle" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
<br/>
      <!--//弹窗-->
      <el-dialog title="修改页面" :visible.sync="addApplyDialog" width="40%" top="5vh">
        <el-form   ref="addApplyForm">
          <el-row>
            <el-col :span="22" align="center">
              <el-form-item label="物品名称：" :label-width="formLabelWidth">
                <el-input  v-model="wArticleName" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="22" align="center">
              <el-form-item label="库存数量：" :label-width="formLabelWidth">
                <el-input  v-model="wStockNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="22" >
              <el-form-item label="物品类别：" :label-width="formLabelWidth">
            <el-select v-model="wTypeId" clearable placeholder="请选择"align="center"  >
            <el-option v-for="articleType in ArticleType" :key="articleType.typeId" :label="articleType.typeName" :value="articleType.typeId"></el-option>
          </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="22" align="center">

              <el-form-item label="单位：" :label-width="formLabelWidth">

                <el-input  v-model="wStockUnit" disabled="disabled"></el-input>

              </el-form-item>

            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addApplyDialog = false">取 消</el-button>
          <el-button type="primary" @click="addApply">确 定</el-button>
        </div>
      </el-dialog>

      <!--//弹窗-->
      <el-dialog title="新增页面" :visible.sync="addNew" width="40%" top="5vh">
        <el-form   ref="addApplyForm">
          <el-row>
            <el-col :span="22" align="center">
              <el-form-item label="物品名称：" :label-width="formLabelWidth">
                <el-input  v-model="newArticle.nArticleName" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="22" align="center">
              <el-form-item label="库存数量：" :label-width="formLabelWidth">
                <el-input  v-model="newArticle.nStockNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="22" >
              <el-form-item label="物品类别：" :label-width="formLabelWidth">
                <el-select v-model="newTypeId" clearable placeholder="请选择"align="center"  >
                  <el-option v-for="articleType in ArticleType" :key="articleType.typeId" :label="articleType.typeName" :value="articleType.typeId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="22" align="center">

              <el-form-item label="单位：" :label-width="formLabelWidth">

                <el-input  v-model="newArticle.nStockUnit" disabled="disabled"></el-input>

              </el-form-item>

            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="addNew = false">取 消</el-button>
          <el-button type="primary" @click="inserNewArticle">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import  request from '@/utils/office-request'
  // 编写vue.js代码
  export default {
    data() {
      return {
        //物品类别
        ProductActive: undefined,
        //物品类别组
        ArticleType:[],
        //物品类别id
        typeId: undefined,
        //物品名字
        goodsName:"",
        total:20,//分页总条数
        pageSize:3,//每页显示数量
        currentPage:1,//当前页码
        tableData: undefined,//表格里面的数据
        multipleSelection: [],//存储表格中所有选中项

        // 组件中使用的各种属性
        //弹窗
        addApplyDialog: false,
        formLabelWidth: "120px",
       //弹窗数据回显
        outWindowData: undefined,
        //弹窗输入框内容
        wArticleId:undefined,
        wArticleName:undefined,//物品名字
        wStockNum: undefined,//物品数量
        wTypeId:undefined,//物品类别
        wStockUnit:undefined,//物品单位

        //批量删除 用于确认窗口是否打开
        visible: false,
        //新增窗口打开标志
        addNew: false,
        //新增窗口数据
        newArticle:{
          nArticleName: undefined,
          nStockNum: undefined,
          nTypeId:undefined,
          nStockUnit: undefined
        },
        newTypeId:undefined
      }
    },
    watch:{
      wTypeId: function(newVal, oldVal) {
        this.wStockUnit = newVal

      },
      newTypeId:function (newVal,oldVal) {
        this.newArticle.nStockUnit = newVal
        this.newArticle.nTypeId = this.newTypeId;
        console.log(this.newArticle.nTypeId)
  }

    },
    // 编写各种事件方法
    methods: {
      //新增窗口打开
      addNewArticle() {
        this.addNew = true
      },
//新增
      inserNewArticle() {
        console.log(this.newArticle)

        request({
          method:'post',
          url: '/article/inserNewArticle',
          data: {
           articleName:this.newArticle.nArticleName,
            stockNum:this.newArticle.nStockNum,
            articleType: this.newArticle.nTypeId,
           stockUnit:this.newArticle.nStockUnit
          }

        }).then((resp) => {
          this.addNew = false
          this.getAllArticle(1)


        }).catch((error) => {
          alert("执行出现了错误")
        })
      },
//批量删除 弹框
      deleteMany() {
        this.visible = true
      },
      deleteManyChecked() {
        let  str=[];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          str.push(this.multipleSelection[i].articleId)
        }
        request({
          method:'delete',
          url: '/article/deleteAllByChecked',
          data: str
        }).then((resp) => {
          this.visible = false
          this.getAllArticle(1)


        }).catch((error) => {
          alert("执行出现了错误")
        })
      },

      //确定
      addApply() {
        request({
          methods:'get',
          url: '/article/updateArticle',
          params: {
            articleId:this.wArticleId,
            articleName:this.wArticleName,
            stockNum:this.wStockNum,
            stockUnit:this.wStockUnit,
            articleType:this.wTypeId
          }
        }).then((resp) => {
          if (resp.success) {
            this.getAllArticle(1)
          }
          this.addApplyDialog = false;

        }).catch((error) => {
          alert("执行出现了错误")
        })

      },
      conditionSelects() {
        request({
          method: 'get',
          url: "/article/ByCondition",
          params:{
            goodsName: this.goodsName,
            typeId:this.typeId

          }
        }).then((resp)=>{
          if (resp.success) {
            this.total=resp.data.total;
            this.tableData=resp.data.list;
            this.currentPage=resp.data.pageNum;
            this.pageSize = resp.data.pageSize;
          }
        })

      },
      handleSelectionChange(val) {
        // var str=[];
        this.multipleSelection = val
        // for (var i = 0; i <this.multipleSelection.length ; i++) {
        //   str.push(this.multipleSelection[i].articleId);
        // }
        // console.log(str)


      },
      getId(row){
        // console.log(row);
        return row.applyId
      },
      returnOne() {
        this.pageSize = 3
        this.getAllType()

        this.getAllArticle(1);
        this.goodsName ="";
        this.typeId = undefined

      },
      handleUpdate(articleId) {
        this.addApplyDialog = true;
        this.outWindowData = undefined;
        this.wStockNum = undefined;
        this.wTypeId = undefined;
        this.wArticleName=undefined;
        this.wArticleId=undefined;
        this.wStockUnit = undefined
        request({
          methods: 'get',
          url: '/article/windowData/' + articleId
        }).then((resp) => {

          this.outWindowData = resp.data;
        this.wArticleName=resp.data.articleName;
          this.wStockNum = resp.data.stockNum;
          this.wTypeId=resp.data.type.typeId;
          this.wArticleId=resp.data.articleId;
        }).catch((error) => {
          alert("执行出现了错误")
        })


      },
      handleDelete(articleId) {
        request({
          methods:'get',
          url: '/article/'+articleId
        }).then((resp) => {
          if (resp.success) {
            this.getAllArticle(1)
          }

        }).catch((error) => {
          alert("执行出现了错误")
        })

      },


      getAllArticle(pageNum) {
        request({
          methods: 'get',
          url: '/article/all/'+pageNum + '/' + this.pageSize
        }).then((resp) => {
            this.total=resp.data.total;
            this.tableData=resp.data.list;
            this.currentPage=resp.data.pageNum;

        }).catch((error) => {
          alert("执行出现了错误")
        })
      },
      getAllType() {
        request({
          methods: 'get',
          url:'/articleType/getAllType'
        }).then((resp) => {
          if (resp.success) {

            this.ArticleType=resp.data;



          }
        }).catch((error) => {
          alert("执行出现了错误")
        })


      }
    },
    // 编写页面加载前执行的代码
    created() {
      this.getAllType();
      this.getAllArticle(1);
    }
  }
</script>

<style scoped>
    .app-container {
        position: relative;
        width: 100%;
        height: calc(100vh - 84px);
    }
</style>
